<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>微博网页版</title>
    <link rel="stylesheet" href="./css/wo.css">
    <script src="./fonts/iconfont.js"></script>
    <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
    <!-- 上导航 -->
    <header id="top">
              <div class="hh">
                <span></span>
              </div>
    </header>
    <!-- 个人信息页 -->
    <div class="ad1">
        <!-- <span class="iconfont icon-tianjiahaoyou"></span>
        <span class="iconfont icon-saoyisao"></span>
        <span class="iconfont icon-shezhi"></span>  -->
    </div>
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./images/shouye/21.jpg">
            </a>
        <div class="txt">
            <h3>巴若楠最棒啦</h3>
            <span class="fujia1">简介：</span>
            <span class="fujia2">翻山 阅书 悦己</span>
            <div class="guanzhu2">
            </div>
        </div> 
        </div>
            </div>
    <!-- 微博关注粉丝 -->
    <div class="weiboguanzhufensi">
        <div class="weibo">
            <h5>2</h5>
            <span>微博</span>
        </div>
        <div class="guanzhu">
            <h5>10</h5>
            <span>关注</span>
        </div>
        <div class="fensi">
            <h5>100</h5>
            <span>粉丝</span>
        </div>
    </div>
    <!-- 选项 -->
<div class="bnav1">
    <ul class="ul2">
        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodexiangce"></use>
                    </svg>
                </a>

                <p>
                    <a id=s href="#">我的相册</a>
                </p>
            </div>
        </li>
        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shoucang"></use>
                    </svg>
                </a>

                <p><a id=s href="#">赞/收藏</a>
                </p>

            </div>
        </li>
        <li>
            <div>
                <a href="#"><svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-liulanjilu"></use>
                    </svg>
                </a>

                <p>
                    <a id=s href="#">浏览记录</a>
                </p>
            </div>
        </li>

        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-caogaoxiang"></use>
                    </svg>
                </a>

                <p>
                    <a id=s href="#">草稿箱</a>
                </p>
            </div>
        </li>

        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodeqianbao"></use>
                    </svg>

                </a>
                <p>
                    <a id=s href="#">我的钱包</a>

                </p>

            </div>
        </li>

        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wodedingdan"></use>
                    </svg>

                </a>
                <p>
                    <a id=s href="#">我的订单</a>

                </p>

            </div>
        </li>

        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-a-chuangjian2"></use>
                    </svg>

                </a>
                <p>
                    <a id=s href="#">创作中心</a>

                </p>

            </div>
        </li>

        <li>
            <div>
                <a href="#">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanggaozhongxin-01"></use>
                    </svg>

                </a>
                <p>
                    <a id=s href="#">广告中心</a>

                </p>

            </div>
        </li>

    </ul>
</div>
<!-- 我的钱包 -->
<div class="wodeqianbao">
    <h4>我的钱包</h4>
    <div class="edu">
        <h5>1.08万</h5>
        <span>可借额度</span>
    </div>
    <div class="tixian">
        <h5>抽锦鲤</h5>
        <span>参与体现</span>
    </div>
    <div class="xinyongka">
        <h5>5万</h5>
        <span>信用卡</span>
    </div>
    <div class="zichan">
        <h5>0.00元</h5>
        <span>金融资产</span>
    </div>
</div>
    <nav id="snav"></nav>
    <main></main>
    <aside></aside>
    <section id="ad"></section>
    <nav id="bnav"></nav>
    <!-- 猜你喜欢 -->
    <div class="xihuan">
    <div class="neirong">
        <div class="tuxiang">
             <a href="#">
                <img src="./images/shouye/21.jpg">
            </a>
        <div class="txt">
            <h3>林永健</h3>
            <span class="fujia1">12-10</span>
            <span class="fujia2">来自微博网页版</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
            </div>
        <div class="neirong1">
            <div class="tuxiang">
                 <a href="#">
                    <img src="./images/shouye/21.jpg">
                </a>
            <div class="txt">
                <h3>z说球鞋</h3>
                <span class="fujia1">12-10</span>
                <span class="fujia2">来自微博网页版</span>
                <div class="guanzhu2">
                      <span>+加关注</span>
                </div>
            </div> 
            </div>
            </div>
        <div class="neirong1">
        <div class="tuxiang">
             <a href="#">
                <img src="./images/shouye/21.jpg">
            </a>
        <div class="txt">
            <h3>戚薇</h3>
            <span class="fujia1">12-10</span>
            <span class="fujia2">来自微博网页版</span>
            <div class="guanzhu2">
                  <span>+加关注</span>
            </div>
        </div> 
        </div>
        </div>
        <div class="neirong1">
            <div class="tuxiang">
                 <a href="#">
                    <img src="./images/shouye/21.jpg">
                </a>
            <div class="txt">
                <h3>苏航uu</h3>
                <span class="fujia1">12-10</span>
                <span class="fujia2">来自微博网页版</span>
                <div class="guanzhu2">
                      <span>+加关注</span>
                </div>
            </div> 
            </div>
            </div>
    <!-- 下导航 -->
    <footer>
        <nav class="bnav">
         <div class="btnav">
             <div class="bonav">
                 <a href="./shouye（guanzhu）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-shouye1"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">首页</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./chaohua（kantie）.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-chaohua"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">超话</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./faxian.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-Magnifier"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">发现</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./xiaoxi.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-xinfeng"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">消息</a>
                 </p>
             </div>
             <div class="bonav">
                 <a href="./wo.html">
                     <svg class="icon" aria-hidden="true">
                         <use xlink:href="#icon-wo"></use>
                     </svg>
                 </a>
                 <p>
                     <a href="#">我的</a>
                 </p>
             </div>
         </div> 
     </nav> 
     </footer>
     <script>

        const url = "http://rap2api.taobao.org/app/mock/321822/brn1";
        //dom
        const span = document.querySelector(".ad1");
        fetch(url)
            .then(res => res.json())
            .then(data => {
                let str = '';
                data.forEach(item => {
                    str += `<span class="iconfont ${item.icon}"></span>`
                });
                span.innerHTML = str;
            })



//         [
//     {
//         "icon": "icon-tianjiahaoyou"
//     },
//     {
//         "icon": "icon-saoyisao"
//     },
//     {
//         "icon": "icon-shezhi"
//     }
// ]

     </script>
</body>
</html>